<template>
  <div>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="Muse" name="first">
        <song-list
          :download="true"
          :add="true"
          :loading="kuwoLoading"
          :songList="kuwoSonglist"
          :totalCount="kuwoTotalCount"
          @onchangePage="kuwochangePage"
          @onplay="playMusic"
          @ondownload="downloadMusic"
          @onadd="onadd"
        ></song-list>
      </el-tab-pane>
      <el-tab-pane label="网易云音乐" name="second">
        <song-list
          :download="true"
          :add="true"
          :loading="wangyiyunLoading"
          :songList="wangyiyunSonglist"
          :totalCount="wangyiyunTotalCount"
          @onchangePage="wangyiyunchangePage"
          @onplay="playMusic"
          @ondownload="downloadMusic"
          @onadd="onadd"
        ></song-list>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import vuex from "vuex";

import songList from "../components/songList";

const kuwoapi = vuex.createNamespacedHelpers("kuwoapi");
const wangyiyunapi = vuex.createNamespacedHelpers("wangyiyunapi");


// 引入方法
import music from "../function/music";

export default {
  data() {
    return {
      activeName: "first",
      tableData: [],
      // 播放地址缓存
      songUrls: {},
      //   tableData: [
      //     {
      //       musicrid: "MUSIC_728676",
      //       name: "我落泪情绪零碎",
      //       artist: "周杰伦",
      //       album: "跨时代",
      //       songTimeMinutes: "04:18",
      //     },
      //   ],
    };
  },
  computed: {
    ...kuwoapi.mapState({
      kuwoLoading: (_) => _.loading,
      kuwoSonglist: (_) => _.songList,
      kuwoTotalCount: (_) => _.totalCount,
    }),
    ...wangyiyunapi.mapState({
      wangyiyunLoading: (_) => _.loading,
      wangyiyunSonglist: (_) => _.songList,
      wangyiyunTotalCount: (_) => _.totalCount,
    }),
  },
  methods: {
    ...wangyiyunapi.mapActions({
      wangyiyunchangePage: "changePage",
    }),
    ...kuwoapi.mapActions({
      kuwochangePage: "changePage",
    }),


    // 添加到本地播放列表
    onadd(e) {
      music.onadd(e,this)
    },

    // 播放按钮点击
    async playMusic(e) {
      music.playMusic(e,this)
    },

    // 下载按钮点击
    downloadMusic(e) {
      music.downloadMusic(e,this)
    },
  },
  components: {
    songList,
  },
};
</script>

<style lang="scss">
.el-tabs__item:hover {
  color: #4daf7c;
}

.el-tabs__item.is-active {
  color: #4daf7c;
}

.el-tabs__item {
  padding: 0 20px;
  height: 30px;
  box-sizing: border-box;
  line-height: 30px;
  display: inline-block;
  list-style: none;
  font-size: 12px;
  font-weight: 500;
  color: #303133;
  position: relative;
}
</style>
